<!-- 拖拽 list -->
<template>
  <div>
    <!-- 
      *
      * string 命名
      * object :(name,pull,put)
          * name ：string
          * pull : 是否可移出  true、false、'clone'、function
          * put : 是否可移入  true、false、'xxx'、['xxx','xxxxx']、function
      *
     -->
    <draggable v-model="widgets" :element="'ul'" :options="{ group: { name: 'ronli', pull: 'clone', put: false } }" @end="drag = false">
      <li class="cursor--move" v-for="(widget, widgetIndex) in widgets" :key="widgetIndex">{{ widget.alias }}</li>
      <li class="cursor--forbid" v-if="!widgets.length" @start="drag = false" @end="drag = false" style="background-color:#67c23a;">--》回收槽《--</li>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import ayay from "./widgets/index.js";

export default {
  name: 'WidgetArea',
  components: {
    draggable,
  },

  data() {
    return {
      widgets: ayay.widgets
    }
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
li.cursor--move {
    cursor: pointer;
}
</style>
